import { Component, Vue } from 'vue-property-decorator';
import proxy from "@/utils/data/proxy";
import { find, get } from "lodash";
@Component({
})
export class mixinTableStore extends Vue {
    // 预留配置-列表配置
    tableConfig: any = {
        // 列对齐方式 居中对齐
        align: "center",
        // 设置后会启动虚拟滚动
        height: "100%",
        // 当内容过长时显示为省略号
        // tooltip 在火狐中有兼容问题
        showOverflow: 'tooltip',
        // 列标题内容过长时
        'show-header-overflow': 'tooltip',
        // 列表头宽度调整
        resizable: true,
        stripe: true,
        'highlight-hover-row': true,
        "highlight-current-row": true,
        // 显示边框
        border: 'full',
        // 鼠标移到行是否要高亮显示
        // 'highlight-hover-row': true,
        // 自定义空数据模版
        'empty-render': {
            name: "noData"
        },
        // 序号配置项
        'seq-config': {
            // 自定义序号的方法 Function({ row, rowIndex, column, columnIndex }) 返回处理后的值
            seqMethod: this.seqMethod
        },
        // 避免某些情况下布局错乱
        // 例如查询头条件动态追加
        "auto-resize": true,
        // 排序配置
        'sort-config': {
            // 是否远程排序
            remote: true
        }
    };

    // 数据源
    dataStore: any = {
        // 必须配置否则无法分页
        pagination: {
            total: 0
        },
        // 可选页码配置
        pageSizes: [15, 30, 50],
        // 必须配置否则无法展示数据
        data: [],
        /**
         * 代理配置，用于加载数据
         * 用法参考 https://www.npmjs.com/package/ux-data-proxy
         * 常用配置
         * autoLoad(boole) 初始化后是否自动加载数据
         * disposeItem(function(item){item.a='123'}) 处理单个数据对象的函数
         * defaultParams(object) 默认参数,默认参数会被相同名称新参数覆盖，此参数传递到请求数据函数
         */
        proxy: {
            // 是否正在请求数据
            isLoading: false,
            // 每次加载几条数据
            pageSize: 15,
            // 请求数据方法
            requestFun: (this as any).getList
        }
    }

    formatterData({ cellValue, column }) {
        if (cellValue) {
            const dataName = column.params,
                item: any = find(get(this, dataName), {
                    value: cellValue.toString()
                });
            return item ? item.label : "";
        }
        return "";
    }

    created() {
        this.initStore();
    }

    initStore(storeName: string = 'dataStore') {
        const me = this as any;
        proxy.init(me[storeName]);
    }

    // 加载数据方法，可在视图中重写
    // isReLoad 是否重载缓存数据
    loadView(params: any, storeName: string = 'dataStore') {
        const me = this as any;
        me[storeName].refresh(params);
    }

    lodaByDefaultParams(params: any, storeName: string = 'dataStore') {
        const me = this as any;
        me[storeName].lodaByDefaultParams(params);
    }

    // 每页显示数量变化
    onSizeChange(pageSize: number) {
        this.proxySizeChange(pageSize);
    }

    // 页码发生变化
    onCurrentChange(page: number) {
        this.proxyCurrentChange(page);
    }

    // 根据条件查询
    proxyQuery(params: any, storeName = "dataStore") {
        // console.log("onSizeChange", pageSize);
        const me = this as any;
        me[storeName].load(params);
    }

    // 每页显示数量变化
    proxySizeChange(pageSize: number, storeName = "dataStore") {
        // console.log("onSizeChange", pageSize);
        const me = this as any;
        me[storeName].loadPageSize(pageSize);
    }

    // 页码发生变化
    proxyCurrentChange(page: number, storeName = "dataStore") {
        const me = this as any;
        // console.log("onCurrentChange", page);
        me[storeName].loadPage(page);
    }

    // 处理序号
    seqMethod(row: any) {
        const me = this as any,
            proxy = me.dataStore.proxy;
        return proxy.pageSize * (proxy.page - 1) + 1 + row.rowIndex;
    }

}
